<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      top="10vh"
      width="500px"
      @closed="closed"
    >
      <el-form ref="dictForms" :model="dictForm" :rules="rules">
        <el-form-item label-width="100px" label="名称" prop="name">
          <el-input v-model="dictForm.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="标识" prop="code">
          <el-input v-model="dictForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="状态" prop="status">
          <el-switch v-model="dictForm.status" active-value="0" inactive-value="1" />
        </el-form-item>
        <el-form-item label-width="100px" label="序号" prop="orderNum">
          <el-input-number v-model="dictForm.orderNum" :min="0" :max="10" label="请输入序号" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveDict
} from '@/api/system/dict'
import {
  isOk
} from '@/utils/request'
export default {
  name: 'InfoDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    },
    handleType: {
      type: String,
      default: ''
    },
    parentId: {
      type: String,
      default: ''
    },
    grandParentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      type: 'M',
      visible: false,
      title: '',
      buttonLoading: false,
      dictForm: {
        id: '',
        parentId: '',
        name: '',
        code: '',
        status: '0',
        orderNum: 0
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          this.dictForm.id = nValue.id || ''
          this.dictForm.parentId = nValue.parentId || '0'
          this.dictForm.name = nValue.name || ''
          this.dictForm.code = nValue.code || ''
          this.dictForm.status = nValue.status || '0'
          this.dictForm.orderNum = nValue.orderNum || 1
        }
      },
      immediate: true,
      deep: false
    },
    handleType: {
      handler: function(nValue) {
        if (nValue) {
          this.type = nValue
          if (nValue === 'Root') {
            this.title = '新增字典'
          }
          if (nValue === 'Edit') {
            this.title = '编辑'
          }
          if (nValue === 'Child') {
            this.title = '新增下级字典'
          }
        }
      },
      immediate: true,
      deep: false
    },
    parentId: {
      handler: function(nValue) {
        if (nValue) {
          this.dictForm.parentId = nValue
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  methods: {
    submitForm: function() {
      this.$refs.dictForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true

          saveDict(this.dictForm).then(rsp => {
            // console.log(rsp);
            if (isOk(rsp)) {
              if (this.type === 'Root' || this.type === 'Child') {
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
              }
              if (this.type === 'Edit') {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
              }
              this.buttonLoading = false
              this.closed()
              if (this.dictForm.parentId === '0') {
                this.$emit('refreshAll')
              } else {
                this.$emit('refresh', this.dictForm.parentId, this.grandParentId)
              }
            }
          })
        }
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
